<template>
<div class="visual-video-box vjs-custom-skin rl"  @contextmenu.prevent="contextmenuHandler" v-show="loading == 0">
    <span class="showCopyright" v-if="showCopyright">{{ $config('copyright_text') }}</span>
    <video ref="video" 
         class="video-js vjs-default-skin vjs-big-play-centered" 
         controls 
         preload="auto" 
         height="200">
        <p class="vjs-no-js">不支持播放</p>
    </video>
</div>
</template>
<script>
export default {
    props: ['options'],
    data () {
        return {
          $video: null,
          loading: 1,
          showCopyright: false
        }
    },
    watch: {
        options: {
          handler(newValue, oldValue) {
            if (newValue) {      
              this.init()
            }
          },
          deep: true
        }
    },
    mounted () {
      this.init()
    },    
    methods: {        
      init () {
        if (this.options && this.options.src) {
            if (!this.$video) {
              this.$video = this.$videojs(this.$refs.video, {
                suppressNotSupportedError: true,
                aspectRatio: this.options.ratio,
                autoplay: this.options.autoplay,
                fluid: true,
                muted: true,
                language: 'zh-CN',
                sources: [{
                  src: this.options.src                 
                }]
              })              
              this.loading = 0
            }
            this.$video.qualityselector({
              sources: this.options.sources,
              onFormatSelected: function(format) {
              }
            })            
        }
      },
      contextmenuHandler () {
          this.showCopyright = !this.showCopyright
          return false
      }      
    }
}
</script>
<style>
</style>
